<template>
  <div>
    <el-form-item label="是否必填">
      <el-switch v-model="_value.required"></el-switch>
    </el-form-item>
    <el-form-item label="必填校验提示" v-show="_value.required">
      <el-input v-model="_value.validateFailMessage" placeholder="必填校验提示" />
    </el-form-item>
    <el-form-item label="描述信息">
      <el-switch v-model="_value.showDescription"></el-switch>
    </el-form-item>
    <el-form-item v-show="_value.showDescription">
      <el-input type="textarea" :autosize="{ minRows: 4 }" v-model="_value.description" placeholder="请输入描述信息" />
    </el-form-item>
    <el-form-item label="是否可清空" v-if="!_value.expanding">
      <el-switch v-model="_value.clearable"></el-switch>
    </el-form-item>
    <el-form-item label="选项展开">
      <el-switch v-model="_value.expanding"></el-switch>
    </el-form-item>
    <el-form label-position="top">
      <el-form-item class="options">
        <template #label>
          <div class="option-item-label">
            <span>选项设置</span>
            <el-button icon="el-icon-plus" type="text" @click="_value.options.push('新选项')">新增选项</el-button>
          </div>
        </template>
        <VueDraggableNext :list="_value.options" group="option" handler=".rank-icon" animation="300">
          <div v-for="(op, index) in _value.options" :key="index" class="option-item">
            <div class="rank-icon">
              <el-icon><Rank /></el-icon>
            </div>
            <el-input v-model.trim="_value.options[index]" placeholder="请设置选项值" clearable>
              <template #append>
                <el-button :icon="DeleteFilled" type="danger" @click="delOption(index)"></el-button>
              </template>
            </el-input>
          </div>
        </VueDraggableNext>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { computed, getCurrentInstance } from "vue";
import { DeleteFilled } from "@element-plus/icons-vue";
import { VueDraggableNext } from "vue-draggable-next";
import useFlowStore from "@/store/modules/gkflow.js";

const { proxy } = getCurrentInstance();

const flowStore = useFlowStore();
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(["update:modelValue"]);
const _value = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});

const delOption = index => {
  if (_value.value.options?.length === 1) return proxy.$modal.msgError("至少需要一个选项");
  const delItem = _value.value.options.splice(index, 1);
  const optionCompare =
    flowStore.selectFormItem?.optionsConfig?.optionCompare?.map(item => {
      const { [delItem]: _, ...rest } = item;
      return rest;
    }) || [];
  flowStore.selectFormItem?.optionsConfig?.optionSimple?.some((item, index) => {
    if (delItem.includes(item.option)) {
      flowStore.selectFormItem?.optionsConfig.optionSimple.splice(index, 1);
      return true;
    }
  });
  flowStore.selectFormItem.optionsConfig.optionCompare = optionCompare;
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
:deep(.options) {
  .el-form-item__label {
    display: block;
    width: 100%;
    text-align: left;
  }
  .el-icon-rank {
    padding-right: 5px;
    cursor: move;
  }
  .option-item {
    @include flex-align;
    .el-input {
      width: 250px;
      margin-left: 10px;
    }
    & + .option-item {
      margin-top: 10px;
    }
  }
}

.option-item-label {
  height: 30px;
  line-height: 30px;
  button {
    float: right;
  }
}
</style>
